<template>
  <form @submit.prevent="editHero">
    <legend>编辑英雄</legend>
    <div class="form-group">
      <label>英雄名称</label>
      <input type="text" class="form-control" v-model="hero.heroName" />
    </div>
    <div class="form-group">
      <label>英雄性别</label>
      <div>
        <input type="radio" value="男" v-model="hero.gender" />男
        <input type="radio" value="女" v-model="hero.gender" />女
      </div>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      hero: {
        heroName: "",
        gender: ""
      }
    };
  },
  created() {
    this.getHeroName();
  },
  methods: {
    getHeroName() {
      this.$http.get("heroes/" + this.$route.params.id).then(data => {
        this.hero = data.data;
      });
    },
    editHero() {
      const { id, heroName, gender } = this.hero;
      this.$http.put("heroes/" + id, { heroName, gender }).then(() => {
        this.$router.push("/hero");
      });
    }
  }
};
</script>

<style>
</style>